<template>
  <div class="container">
    <view class="list">
      <view class="item" v-for="(item, index) in list" :key="index">
		  <view class="item-title">
			  <u-cell-item
			    :arrow="false"
			    hover-class="none"
			    :border-bottom="true"
			    title="机具号："
			    class="title"
			    :value="item.serialno"
			  />
		  </view>
		  <view class="item-content">
			  <u-cell-item
			    :arrow="false"
			    hover-class="none"
			    :border-bottom="false"
			    title="操作人："
			    :value="item.agentName + '(' + item.agentNo + ')'"
			  />
			  <u-cell-item
			    :arrow="false"
			    hover-class="none"
			    :border-bottom="false"
			    title="目标人："
			    :value="item.toAgentName + '(' + item.toAgentNo + ')'"
			  />
			  <view class="purple-bg">
			  <u-cell-item
			    :arrow="false"
			    hover-class="none"
			    :border-bottom="false"
			    title="操作时间："
			    :value="item.operateTime"
			  />
			  </view>
			  <u-cell-item
			    :arrow="false"
			    hover-class="none"
			    :border-bottom="false"
			    title="操作类型："
				value-style={color:#7B4EFF;}
			    :value="item.operateType | operateType"
			  />
		  </view>
        
      </view>
    </view>
    <u-popup v-model="filterPopup" mode="top" :border-radius="20">
      <div class="filter-body">
        <!-- <view class="f-title">筛选条件</view> -->

        <div class="filter-content">
          <u-field
            label="机具号："
            v-model="query.serialno"
            :label-width="170"
            input-align="left"
            placeholder="请输入机具号"
          >
          </u-field>
          <u-field
            :disabled="true"
            label="操作类型："
            :value="query.operatName"
            input-align="left"
            :label-width="170"
            placeholder="请选择"
            
          >
            <text class="iconfont icon-Downarrow-R iconfont-right" slot="right" @click="showPicker = true"></text>
          </u-field>
          <view class="duble-input flex-space-between">
            <text class="text">日期</text>
            <u-field
              label=""
              v-model="query.startDate"
              :disabled="true"
              :label-width="0"
              :border-bottom="false"
              input-align="center"
              placeholder="请选择"
              @click="chooseTime('start')"
            >
            </u-field>
            -
            <u-field
              :disabled="true"
              label=""
              :value="query.endDate"
              :border-bottom="false"
              input-align="center"
              :label-width="0"
              placeholder="请选择"
              @click="chooseTime('end')"
            />
          </view>
        </div>
        <div class="footer-btn">
          <div class="btn-left">
            <button class="reset" size="large" type="warn" @click="resetHandle">
              重置
            </button>
          </div>
          <div class="btn-right">
            <button class="myBtn" round size="large" @click="queryHandle">
              搜索
            </button>
          </div>
        </div>
      </div>
    </u-popup>
    <u-picker
      title="政策筛选"
      v-model="showPicker"
      mode="selector"
      :range="operatList"
      range-key="operatName"
      confirm-color="#4888FB"
      @confirm="onOperatConfirm"
      @cancel="showPicker = false"
    />
    <u-picker
      mode="time"
      v-model="timePicker"
      :default-time="defaultTime"
      :params="params"
      title="选择年月"
      @confirm="pickerConfirmHandle"
      start-year="2021"
      @cancel="timePicker = false"
      confirm-color="#4888FB"
    />
    <uni-load-more :status="loadMore"></uni-load-more>
  </div>
</template>

<script>
import {
  formDateToString,
  getCurrentMonthFirst1,
  getNowMonthNoDate,
  getCurrentMonthLast,
  getMonthFirst,
  getMonthLast,
} from "_c/utils/date";
import loadMoreData from "@/mixins/loadmore";
import { termOperatList } from "_a/terminal";

export default {
  mixins: [loadMoreData],
  data() {
    return {
      list: [],
      query: {
        startDate: "",
        endDate: "",
        agentType: 2, //2:自己
        // timeDate: getNowMonthNoDate(new Date()),
      },
      params: {
        year: true,
        month: true,
        day: true,
        hour: false,
        minute: false,
        second: false,
      },
      timePicker: false,
      filterPopup: false,
      showPicker: false,
      totalNum: 0, // 总数量
      chooseType: "start", //选择时间类型
      defaultTime: "",
      operatList: [
        {
          operatName: "分配",
          operatCode: "0",
        },
        {
          operatName: " 划拨",
          operatCode: "1",
        },
        {
          operatName: "回收",
          operatCode: "2",
        },
        {
          operatName: "绑定",
          operatCode: "3",
        },
        {
          operatName: "解绑",
          operatCode: "4",
        },
        {
          operatName: "回拨",
          operatCode: "5",
        },
      ],
    };
  },
  onLoad(o) {
    // this.navIndex = o.type || 0;
    // this.query.operatCode = o.operatCode;
    // let item = this.operatList.find((item) => item.operatCode == o.operatCode);
    // if (item) {
    //   this.query.operatName = item.operatName;
    // }
    this.getList();
  },

  onNavigationBarButtonTap() {
    this.changeEChartType();
  },
  methods: {
    chooseTime(type) {
      this.timePicker = true;
      this.chooseType = type;
      if (type == "start") {
        this.defaultTime = this.query.startDate;
      } else {
        this.defaultTime = this.query.entDate;
      }
    },
    onOperatConfirm(e) {
      console.log(e);
      this.query.operateType = this.operatList[e[0]].operatCode;
      this.query.operatName = this.operatList[e[0]].operatName;
      // this.chooseIndex = e[0];
    },
    init() {
      this.$nextTick(() => {
        this.list = [];
        this.refreshLoad();
      });
    },
    resetHandle() {
      this.typename = "全部";
      this.query = {
        pageNum: 1,
        pageSize: 20,
      };
    },
    queryHandle() {
      this.$forceUpdate();
      this.init();
      this.filterPopup = false;
    },
    pickerConfirmHandle(item) {
      if (this.chooseType == "start") {
        this.query.startDate = `${item.year}-${item.month}-${item.day}`;
      } else {
        this.query.endDate = `${item.year}-${item.month}-${item.day}`;
      }
      this.timePicker = false;
    },
    changeEChartType() {
      this.filterPopup = true;
    },
    getList() {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.query,
      };
      termOperatList(params).then((res) => {
        var list = res.rows;
        this.loadMoreStatusDeal(list);
        if (list.length > 0) {
          this.list = this.list.concat(list);
        }
      });
    },
    reachBottomCallBack() {
      this.getList();
    },
  },
};
</script>
<style scoped lang='scss'>
.container {
  padding: R(25);
}
.list {
  /* background: #fff;
  border-radius: R(10); */
  .filter {
    /* padding: R(20); */
    font-size: R(24px);
    font-weight: 400;
    color: #666666;
    margin-bottom: R(20);
    .time-box {
      font-size: R(26);
    }
    .icon-xiajiantou {
      font-size: R(24);
      margin-left: R(14);
    }
  }
}
.total {
  font-size: R(24);
  font-weight: 400;
  color: #737373;
  margin-bottom: R(20);
  .blue {
    color: #4286f5;
  }
}
.item {
  /* margin: R(25) R(0); */
  /* padding: R(14) R(28) R(24); */
 
  background: #fff;
  border-radius: $uni-border-radius-lg;
  margin-bottom: $uni-spacing-col-lg;
  .title {
    font-size: R(30);
    font-weight: bold;
    color: #1a1a1a;
    /deep/.u-cell__value {
      color: #1a1a1a;
    }
  }
  .item-title{
  	padding: $uni-spacing-row-lg;
	border-bottom: 1px solid #eee;
  }
  .item-content{
	padding: $uni-spacing-row-lg;
  }
  /deep/.u-cell {
    padding: R(10) 0;
    .u-cell__value {
      text-align: left;
    }
  }
  .u-border-bottom:after{
	border:none;
  }
}

.filter-body {
  padding: R(30);
  .f-title {
    font-size: R(30);
    text-align: center;
    font-weight: 400;
    color: #999;
  }
}
.filter-content {
  margin-bottom: R(30);
  .duble-input {
    border-bottom: 1px solid #eee;
    .text {
      width: R(140);
      white-space: nowrap;
      padding: 0 R(28);
    }
  }
}

.filter-body .footer-btn {
  display: flex;
  /*position: absolute;*/
  bottom: 0;
  width: 100%;
}

.filter-body .footer-btn .btn-left {
  width: 30%;
  margin-left: 15%;
}

.filter-body .footer-btn .btn-right {
  width: 30%;
  margin-left: 10%;
}

.filter-body .filter-tiem {
  margin-bottom: R(25);
}

.filter-body .filter-tiem .tit {
  font-size: R(32);
  color: #333;
}

.filter-body .filter-tiem .select-list .select-item {
  float: left;
  width: 33%;
  padding: R(20) R(10);
}
.icon-xiajiantou {
  font-size: R(24);
  margin-left: R(14);
}
.myBtn{
	background: $button-linear-bg;
}
</style>